<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>网页元素</title>
<link rel="stylesheet" href="houtaiguanli/css/style.default.css" type="text/css" />
<script type="text/javascript" src="houtaiguanli/js/plugins/jquery-1.7.min.js"></script>
<script type="text/javascript" src="houtaiguanli/js/plugins/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="houtaiguanli/js/plugins/jquery.cookie.js"></script>
<script type="text/javascript" src="houtaiguanli/js/plugins/colorpicker.js"></script>
<script type="text/javascript" src="houtaiguanli/js/plugins/jquery.jgrowl.js"></script>
<script type="text/javascript" src="houtaiguanli/js/plugins/jquery.alerts.js"></script>
<script type="text/javascript" src="houtaiguanli/js/custom/general.js"></script>
<script type="text/javascript" src="houtaiguanli/js/custom/elements.js"></script>
<!--[if IE 9]>
    <link rel="stylesheet" media="screen" href="houtaiguanli/css/style.ie9.css"/>
    <![endif]-->
<!--[if IE 8]>
    <link rel="stylesheet" media="screen" href="houtaiguanli/css/style.ie8.css"/>
    <![endif]-->
<!--[if lt IE 9]>
	<script src="houtaiguanli/js/plugins/css3-mediaqueries.js"></script>
<![endif]-->
</head>

<body class="withvernav">
<div class="bodywrapper">
    <div class="topheader">
        <div class="left">
            <h1 class="logo"><span>管理员</span></h1>
            <span class="slogan">后台管理系统</span>
            
            <div class="search">
            	<form action="" method="post">
                	<input type="text" name="keyword" id="keyword" value="Enter keyword(s)" />
                    <button class="submitbutton"></button>
                </form>
            </div><!--search-->
            
            <br clear="all" />
            
        </div><!--left-->
        
        <div class="right">
        	<!--<div class="notification">
                <a class="count" href="notifications.html"><span>9</span></a>
        	</div>
			-->
            <div class="userinfo">
            	<img src="images/thumbs/avatar.png" alt="" />
                <span>Juan Dela Cruz</span>
            </div><!--userinfo-->
            
            <div class="userinfodrop">            	
            	<div class="avatar">
                	<a href=""><img src="images/thumbs/avatarbig.png" alt="" /></a>
                    <div class="changetheme">
                        切换主题: <br />
                    	<a class="default"></a>
                        <a class="blueline"></a>
                        <a class="greenline"></a>
                        <a class="contrast"></a>
                        <a class="custombg"></a>
                    </div>
                </div><!--avatar-->
				<div class="userdata">
                	<h4>Juan Dela Cruz</h4>
                    <span class="email">youremail@yourdomain.com</span>
                    <ul>
                    	<li><a href="editprofile.html">编辑资料</a></li>
                        <li><a href="accountsettings.html">账号设置</a></li>
                        <li><a href="help.html">帮助</a></li>
                        <li><a href="index.html">退出登录</a></li>
                    </ul>
                </div><!--userdata-->
            </div><!--userinfodrop-->
        </div><!--right-->
    </div><!--topheader-->
    
    
    <div class="header">
    	<ul class="headermenu">
        	<li><a href="dashboard.html"><span class="icon icon-flatscreen"></span>首页</a></li>
            <li><a href="manageblog.html"><span class="icon icon-pencil"></span>博客管理</a></li>
            <li><a href="messages.html"><span class="icon icon-message"></span>查看消息</a></li>
            <li><a href="reports.html"><span class="icon icon-chart"></span>统计报表</a></li>
        </ul>
        
        <div class="headerwidget">
        	<div class="earnings">
            	<div class="one_half">
                	<h4>今天的收益</h4>
                    <h2>$640.01</h2>
                </div><!--one_half-->
                <div class="one_half last alignright">
                	<h4>当前利润</h4>
                    <h2>53%</h2>
                </div><!--one_half last-->
            </div><!--earnings-->
        </div><!--headerwidget-->
        
    </div><!--header-->
    
    <div class="vernav2 iconmenu">
    	<ul>
        	<li><a href="#formsub" class="editor">表单提交</a>
            	<span class="arrow"></span>
            	<ul id="formsub">
               		<li><a href="forms.html">基础表单</a></li>
                    <li><a href="wizard.html">表单验证</a></li>
                    <li><a href="editor.html">编辑器</a></li>
                </ul>
            </li>
            <!--<li><a href="filemanager.html" class="gallery">File Manager</a></li>-->
            <li class="current"><a href="elements.html" class="elements">网页元素</a></li>
            <li><a href="widgets.html" class="widgets">网页插件</a></li>
            <li><a href="calendar.html" class="calendar">日历事件</a></li>
            <li><a href="support.html" class="support">客户支持</a></li>
            <li><a href="typography.html" class="typo">文字排版</a></li>
            <li><a href="tables.html" class="tables">数据表格</a></li>
			<li><a href="buttons.html" class="buttons">按钮 &amp; 图标</a></li>
            <li><a href="#error" class="error">错误页面</a>
            	<span class="arrow"></span>
            	<ul id="error">
               		<li><a href="notfound.html">404错误页面</a></li>
                    <li><a href="forbidden.html">403错误页面</a></li>
                    <li><a href="internal.html">500错误页面</a></li>
                    <li><a href="offline.html">503错误页面</a></li>
                </ul>
            </li>
            <li><a href="#addons" class="addons">其他页面</a>
            	<span class="arrow"></span>
            	<ul id="addons">
               		<li><a href="newsfeed.html">新闻订阅</a></li>
                    <li><a href="profile.html">资料页面</a></li>
                    <li><a href="productlist.html">产品列表</a></li>
                    <li><a href="photo.html">图片视频分享</a></li>
                    <li><a href="gallery.html">相册</a></li>
                    <li><a href="invoice.html">购物车</a></li>
                </ul>
            </li>
        </ul>
        <a class="togglemenu"></a>
        <br /><br />
    </div><!--leftmenu-->
        
    <div class="centercontent">
    
        <div class="pageheader notab">
            <h1 class="pagetitle">分子</h1>
            <span class="pagedesc">这是一个页面的示例说明</span>
        </div><!--pageheader-->
        
        <div id="contentwrapper" class="contentwrapper elements">
                
                    <div class="contenttitle2">
                    	<h3>拾荒者</h3>
                    </div><!--contenttitle-->
                    
                    <br />
                    
                    <form class="stdform stdform2" action="" method="post">
                    	<p>
                        	<label>选色器</label>
                            <span class="field">
                            	<input type="text" name="colorpicker" class="width100" id="colorpicker" />
                            </span><!--field-->
                        </p>
                        <p>
                        	<label>Colorpicker 2</label>
                            <span class="field">
                            	<input type="text" name="colorpicker" class="width100" id="colorpicker2" />
                                <span id="colorSelector" class="colorselector">
                                	<span></span>
                                </span>
                            </span><!--field-->
                        </p>
                        <p class="flatmode">
                        	<label>Colorpicker平面模式</label>
                            <span class="field">
                            	<input type="text" name="colorpicker" class="width100" id="colorpicker3" />
                                <br /><br />
                            	<span id="colorpickerholder"></span>
                                
                            </span><!--field-->
                        </p>
                        <p>
                        	<label>日期选择器</label>
                            <span class="field">
                            	<input id="datepicker" type="text" class="width100" /> 
                            </span>
                        </p>
                    </form>
                    
                  	<br />
                    
                    <div class="contenttitle2">
                    	<h3>滑块</h3>
                    </div><!--contenttitle-->
                    
                    <br />
                    
                    <div class="stdform stdform2">
                    	
                        <div class="par">
                        	<label>正常滑块</label>
                            <div class="field">
                            	<div id="slider"></div>
                            </div><!--field-->
                        </div><!--par-->
                        
                        <div class="par">
                        	<label>捕捉到增量</label>
                            <div class="field">
                            	<span>取款: <strong><span id="amount" class="color333"></span></strong> </span>
                        		<div id="slider2"></div>
                            </div><!--field-->
                        </div><!--par-->
                        
                        <div class="par">
                        	<label>范围滑块</label>
                            <div class="field">
                            	<span>价格范围: <strong><span id="amount2" class="color333"></span></strong></span>
                        		<div id="slider3"></div>
                            </div><!--field-->
                        </div><!--par-->
                        
                        <div class="par">
                        	<label>固定最小值</label>
                            <div class="field">
                            	<span>最高价格: <strong><span id="amount4" class="color069"></span></strong></span>
                        		<div id="slider4"></div>
                            </div><!--field-->
                        </div><!--par-->
                        
                        <div class="par">
                        	<label>固定最大值</label>
                            <div class="field">
                            	<span>最高价格: <strong><span id="amount5" class="color333"></span></strong></span>
                        		<div id="slider5"></div>
                            </div><!--field-->
                        </div><!--par-->
                        
                        <div class="par">
                        	<label>垂直滑块</label>
                            <div class="field">
                        		<div style="float: left; width: 70px;">
                                    <span>体积: <strong><span id="amount6" class="color333"></span></strong></span> <br />
                                    <div id="slider6" style="height:150px;"></div>
                                </div>
                                
                                <div class="vs2" style="float: left; margin-left: 80px;">
                                    <span>价格范围: <strong><span id="amount7" class="color333"></span></strong></span> <br />
                                    <div id="slider7" style="height:150px;"></div>
                                </div>
                                <br clear="all" />
                            </div><!--field-->
                        </div><!--par-->
                        
                    </div><!--stdForm-->
                      
                    <br clear="all" /><br />
                    
                    
                    <div class="contenttitle2">
                    	<h3>咆哮声通知</h3>
                    </div><!--contenttitle-->
                    <br />
					<a href="" class="anchorbutton growl">基本咆哮</a> &nbsp;
                    <a href="" class="anchorbutton growl2">长时间咆哮消息</a>
                    
                    <br /><br /><br />
                    
                    <div class="contenttitle2">
                    	<h3>警报框</h3>
                    </div><!--contenttitle-->
                    <br />
					<a href="" class="anchorbutton alertboxbutton">基本报警</a> &nbsp;
                    <a href="" class="anchorbutton confirmbutton">确认框</a> &nbsp;
					<a href="" class="anchorbutton promptbutton">提示框</a> &nbsp;
                    <a href="" class="anchorbutton alerthtmlbutton">对话框支持HTML</a>
                    
                    <br /><br /><br />
                                        
                    <div class="one_half">
                        <div class="contenttitle2">
                            <h3>进度条</h3>
                        </div><!--contenttitle-->
                        <br />
                        <div class="progress">
                            存储 (60%)
                            <div class="bar"><div class="value bluebar" style="width: 60%;"></div></div>
                        </div><!--progress-->
                        <br />
                        <div class="progress">
                            带宽 (86%)
                            <div class="bar"><div class="value orangebar" style="width: 86%;"></div></div>
                        </div><!--progress-->
                        <br />
                        <div class="progress">
                            印象 (34%)
                            <div class="bar"><div class="value redbar" style="width: 34%;"></div></div>
                        </div><!--progress-->

                    </div><!--one_half-->
                    
                    <div class="one_half last">
                        <div class="contenttitle2">
                            <h3>进度条</h3>
                        </div><!--contenttitle-->
                        <br />
                        <div class="progress">
                            <div class="bar2"><div class="value bluebar" style="width: 60%;">存储 (60%)</div></div>
                        </div><!--progress-->
                        <br />
                        <div class="progress">
                            <div class="bar2"><div class="value orangebar" style="width: 86%;">带宽 (86%)</div></div>
                        </div><!--progress-->
                        <br />
                        <div class="progress">
                            <div class="bar2"><div class="value redbar" style="width: 34%;">印象 (34%)</div></div>
                        </div><!--progress-->
                    </div><!--one_half last-->
                    
                    <br clear="all" /><br /><br />
                    
                    <div class="contenttitle2">
                    	<h3>分页</h3>
                    </div><!--contenttitle-->
                    <br />
                    
                    <ul class="pagination">
                    	<li class="first"><a href="" class="disable">&laquo;</a></li>
                        <li class="previous"><a href="" class="disable">&lsaquo;</a></li>
                    	<li><a href="" class="current">1</a></li>
                        <li><a href="">2</a></li>
                        <li><a href="">3</a></li>
                        <li><a href="">4</a></li>
                        <li><a href="">5</a></li>
                        <li class="next"><a href="">&rsaquo;</a></li>
                        <li class="last"><a href="">&raquo;</a></li>
                    </ul>
                    
                    <br /><br />
                    
                    <ul class="pagination pagination2">
                    	<li class="first"><a href="" class="disable">&laquo;</a></li>
                        <li class="previous"><a href="" class="disable">&lsaquo;</a></li>
                    	<li><a href="" class="current">1</a></li>
                        <li><a href="">2</a></li>
                        <li><a href="">3</a></li>
                        <li><a href="">4</a></li>
                        <li><a href="">5</a></li>
                        <li class="next"><a href="">&rsaquo;</a></li>
                        <li class="last"><a href="">&raquo;</a></li>
                    </ul>
                    
                    
                    <br clear="all" /><br /><br />
                    
                    <div class="contenttitle2">
                    	<h3>示例选项卡</h3>
                    </div><!--contenttitle-->
                    <br />

                    <div id="tabs">
                        	<ul>
                                <li><a href="#tabs-1">标签 1</a></li>
                                <li><a href="#tabs-2">标签 2</a></li>
                                <li><a href="#tabs-3">标签 3</a></li>
                            </ul>
                            <div id="tabs-1">
                                您的内容在这里输入标签1
                            </div>
                            <div id="tabs-2">
                                您的内容在这里输入标签2
                            </div>
                            <div id="tabs-3">
                                您的内容在这里输入标签3
                        	</div>
					</div><!--#tabs-->
                    
                    <br clear="all" /><br />
                    
                    <div class="contenttitle2">
                    	<h3>面包屑</h3>
                    </div><!--contenttitle-->
                    <br />
                    
                    <ul class="breadcrumbs">
                    	<li><a href="">仪表板</a></li>
                        <li><a href="">分子</a></li>
                        <li>面包屑</li>
                    </ul>
                    <br />
                    <ul class="breadcrumbs breadcrumbs2">
                    	<li><a href="">仪表板</a></li>
                        <li><a href="">分子</a></li>
                        <li>面包屑</li>
                    </ul>
                    
                    <br clear="all" /><br />
                    
                    <div class="contenttitle2">
                    	<h3>可排序列表</h3>
                    </div><!--contenttitle-->
                    <br />
                    
                    <div class="one_third">
                        <ul id="sortable" class="sortlist">
                            <li><div class="label"><span class="moveicon"></span>第1项</div></li>
                            <li><div class="label"><span class="moveicon"></span>第2项</div></li>
                            <li><div class="label"><span class="moveicon"></span>第3项</div></li>
                            <li><div class="label"><span class="moveicon"></span>第4项</div></li>
                            <li><div class="label"><span class="moveicon"></span>第5项</div></li>
                        </ul>
                    </div>
                    
                    <div class="one_third last">
                        <ul id="sortable2" class="sortlist">
                            <li>
                            	<div class="label">
                                	<span class="moveicon"></span>
                                    <span class="arrowdrop"></span>
                                    Item 1
                                </div><!--label-->
                            	<div class="details">
                                	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
                                </div><!--details-->
                            </li>
                            <li>
                            	<div class="label">
                                	<span class="moveicon"></span>
                                    <span class="arrowdrop"></span>
                                    Item 2
                                </div><!--label-->
                            	<div class="details">
                                	<form class="stdform" action="" method="post">
                                    	<p>
                                        名称: <br />
                                        <input type="text" name="input1" /></p>
                                        <p>
                                        电子邮件: <br />
                                        <input type="text" name="input1" /></p>
                                        <p><button class="submit radius2">提交按钮</button></p>
                                    </form>
                                </div><!--details-->
                            </li>
                            <li>
                            	<div class="label">
                                	<span class="moveicon"></span>
                                    <span class="arrowdrop"></span>
                                    Item 3
                                </div><!--label-->
                            	<div class="details">
                                	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
                                </div><!--details-->
                            </li>
                            <li>
                            	<div class="label">
                                	<span class="moveicon"></span>
                                    <span class="arrowdrop"></span>
                                    Item 4
                                </div><!--label-->
                            	<div class="details">
                                    <ul class="recent_list">
                                        <li class="user new">
                                            <div class="msg">
                                                <a href="">Justin Meller</a> added <a href="">John Doe</a> as Admin.
                                            </div>
                                        </li>
                                        <li class="call new">
                                            <div class="msg">
                                                You missed a call from <a href="">Porfirio</a>
                                            </div>
                                        </li>
                                        <li class="calendar new">
                                            <div class="msg">
                                                <a href="">Katherine Kate</a> invited you in an event <a href="">Rock Party</a>.
                                            </div>
                                        </li>
                                        <li class="settings">
                                            <div class="msg">
                                                <a href="">Jane Doe</a> updated her profile.
                                            </div>
                                        </li>
                                        <li class="user">
                                            <div class="msg">
                                                <a href="">Jet Lee</a> is now following you.
                                            </div>
                                        </li>
                                    </ul>
                                </div><!--details-->
                            </li>
                            <li>
                            	<div class="label">
                                	<span class="moveicon"></span>
                                    <span class="arrowdrop"></span>
                                    Item 5
                                </div><!--label-->
                            	<div class="details">
                                	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
                                </div><!--details-->
                            </li>
                        </ul>
                    </div>
                    
                    <br clear="all" /><br />
        
        </div><!--contentwrapper-->
        
	</div><!-- centercontent -->
    
    
</div><!--bodywrapper-->

</body>
</html>
